<template>
  <div>
    <table cellspacing="0" class="table">
      <thead>
        <tr>
          <th width="50"><Checkbox v-model="selectAll" @on-change="onSelectAll"></Checkbox></th>
          <th width="20"></th>
          <th v-for="item in listData.columns" :key="item.id" :width="item.width">{{item.title}}</th>
        </tr>
      </thead>
      <tbody v-for="item in list" :key="item.id">
        <tr>
          <td><Checkbox v-model="item.checked"></Checkbox></td>
          <td>
            <Icon type="ios-arrow-down" size="20" v-if="item.showChildren" @click="onShowChild(item)"></Icon>
            <Icon type="ios-arrow-right" size="20" v-if="item.children && item.children.length && !item.showChildren" @click="onShowChild(item)"></Icon>
          </td>
          <td>{{item.code}}</td>
          <td>{{item.skuCode}}</td>
          <td style="width:100px"><div class="e1 flex-center"><img :src="item.productPrimaryImg" alt="">{{item.title}}</div></td>
          <td>{{item.price}}</td>
          <td>{{item.sale}}</td>
          <td>{{item.total}}</td>
          <td>{{item.status}}</td>
          <td>{{item.stock}}</td>
          <td>
            <Button type="primary" size="small">撤出活动</Button>
          </td>
        </tr>
        <tr v-if="item.children && item.children.length" v-for="child in item.children" :key="child.id" v-show="item.showChildren">
          <td></td>
          <td></td>
          <td><Checkbox v-model="child.checked"></Checkbox></td>
          <td>{{child.skuCode}}</td>
          <td style="width:100px"><div class="e1 flex-center"><img :src="item.productPrimaryImg" alt="">{{item.title}}</div></td>
          <td>{{child.price}}</td>
          <td>{{child.sale}}</td>
          <td>{{child.total}}</td>
          <td>{{child.status}}</td>
          <td>{{child.stock}}</td>
          <td>
            <Button type="primary" size="small">撤出活动</Button>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="pager">
      <Page 
        :total="totalItem" 
        :current="currentPage"
        :page-size="pageSize"
        @on-change="onPageChange"
        @on-page-size-change="onPageSizeChange"
        show-sizer 
        placement="top">
      </Page>
    </div> 
    <Loader :status="status" @refresh="getData"></Loader>
  </div>
</template>
<script>
import listData from './NewEditData';
export default {
  props: {
    row: Object
  },
  data() {
    return {
      selectAll: false,
      listData: listData,
      status: 'pass',
      totalItem: 1,
      pageSize: window.$pageSize,
      currentPage: 1,
      list: [{
        id: 1,
        code: '1292711453',
        name: '朝阳轮胎 泥地越野皮卡车胎 SL366系列',
        img: 'https://img1.tuhu.org/Images/Products/FkpAP0QzuXfxfGUmVEPlgS9n0zB3_w800_h800.jpeg@420h_99q.jpeg',
        price: 100.154,
        discount: 10.00,
        sale: 15.12,
        skuCode: '-',
        total: 522.00,
        checked: true,
        stock: 1212,
        status: '上架',
        showChildren: false,
        children: [{
          code: '-',
          skuCode: '4492711453',
          name: '朝阳轮胎 泥地越野皮卡车胎 SL366系列',
          img: 'https://img1.tuhu.org/Images/Products/FkpAP0QzuXfxfGUmVEPlgS9n0zB3_w800_h800.jpeg@420h_99q.jpeg',
          price: 651.00,
          total: 522.54,
          discount: '',
          sale: 25.00,
          stock: 1212,
          status: '上架',
          checked: false
        }, {
          code: '-',
          skuCode: '4492711453',
          name: '朝阳轮胎 泥地越野皮卡车胎 SL366系列',
          img: 'https://img1.tuhu.org/Images/Products/FkpAP0QzuXfxfGUmVEPlgS9n0zB3_w800_h800.jpeg@420h_99q.jpeg',
          price: 9154.15,
          total: 522.00,
          discount: '',
          sale: '',
          stock: 1212,
          status: '上架',
          checked: false
        }]
      }, {
        id: 2,
        code: '1292711453',
        name: '朝阳轮胎 泥地越野皮卡车胎 SL366系列',
        img: 'https://img1.tuhu.org/Images/Products/FkpAP0QzuXfxfGUmVEPlgS9n0zB3_w800_h800.jpeg@420h_99q.jpeg',
        price: 100.154,
        total: 522.00,
        discount: '',
        skuCode: '-',
        sale: '',
        stock: 1212,
        status: '上架',
        showChildren: false,
        checked: false
      }, {
        id: 3,
        code: '1292711453',
        name: '朝阳轮胎 泥地越野皮卡车胎 SL366系列',
        img: 'https://img1.tuhu.org/Images/Products/FkpAP0QzuXfxfGUmVEPlgS9n0zB3_w800_h800.jpeg@420h_99q.jpeg',
        price: 100.154,
        discount: '',
        sale: '',
        skuCode: '-',
        total: 522.00,
        checked: true,
        stock: 1212,
        status: '上架',
        showChildren: false,
        children: [{
          code: '-',
          skuCode: '4492711453',
          name: '朝阳轮胎 泥地越野皮卡车胎 SL366系列',
          img: 'https://img1.tuhu.org/Images/Products/FkpAP0QzuXfxfGUmVEPlgS9n0zB3_w800_h800.jpeg@420h_99q.jpeg',
          price: 651.00,
          total: 522.54,
          discount: '',
          sale: '',
          stock: 1212,
          status: '上架',
          checked: false
        }, {
          code: '-',
          skuCode: '4492711453',
          name: '朝阳轮胎 泥地越野皮卡车胎 SL366系列',
          img: 'https://img1.tuhu.org/Images/Products/FkpAP0QzuXfxfGUmVEPlgS9n0zB3_w800_h800.jpeg@420h_99q.jpeg',
          price: 9154.15,
          total: 522.00,
          discount: '',
          sale: '',
          stock: 1212,
          status: '上架',
          checked: false
        }]
      }, {
        id: 4,
        code: '1292711453',
        name: '朝阳轮胎 泥地越野皮卡车胎 SL366系列',
        img: 'https://img1.tuhu.org/Images/Products/FkpAP0QzuXfxfGUmVEPlgS9n0zB3_w800_h800.jpeg@420h_99q.jpeg',
        price: 100.154,
        total: 522.00,
        discount: '',
        skuCode: '-',
        stock: 1212,
        status: '上架',
        sale: '',
        showChildren: false,
        checked: false
      }]
    }
  },
  methods: {
    onSelectAll() {
      // 全选 、全不选
    },
    onShowChild(item) {
      item.showChildren = !item.showChildren;
    },
    getData() {},
    onPageChange() {},
    onPageSizeChange() {}
  }
}
</script>

